<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心 - 智联医防服务平台</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        :root {
            --primary: #165DFF;
            --secondary: #36D399;
            --accent: #FF9F43;
            --dark: #1E293B;
            --light: #F8FAFC;
        }

        body {
            font-family: 'Inter', system-ui, sans-serif;
            background-color: #f8f9fa;
            color: var(--dark);
            padding-top: 80px;
        }

        .bg-gradient-blue {
            background: linear-gradient(135deg, var(--primary) 0%, #0F4C81 100%);
        }

        .nav-link {
            position: relative;
            color: var(--dark) !important;
            font-weight: 500;
        }

        .nav-link:hover,
        .nav-link.active {
            color: var(--primary) !important;
        }

        .nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: 0;
            left: 0;
            background-color: var(--primary);
            transition: width 0.3s ease;
        }

        .nav-link:hover::after,
        .nav-link.active::after {
            width: 100%;
        }

        .footer {
            background-color: var(--dark);
            color: white;
            padding-top: 4rem;
            padding-bottom: 2rem;
        }

        .footer-links a {
            color: rgba(255, 255, 255, 0.7);
            text-decoration: none;
            transition: color 0.3s;
        }

        .footer-links a:hover {
            color: white;
        }

        .profile-dropdown {
            display: none;
            position: absolute;
            right: 0;
            top: 100%;
            width: 240px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            padding: 0.5rem 0;
        }

        .show-dropdown:hover .profile-dropdown {
            display: block;
        }

        .nav-shadow {
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

        .navbar {
            background-color: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
        }

        .profile-container {
            min-height: calc(100vh - 80px);
        }

        .sidebar-card {
            position: sticky;
            top: 100px;
        }

        .profile-tab {
            display: block;
            padding: 12px 20px;
            border-radius: 8px;
            margin-bottom: 8px;
            color: var(--dark);
            text-decoration: none;
            transition: all 0.3s;
        }

        .profile-tab:hover,
        .profile-tab.active {
            background-color: rgba(22, 93, 255, 0.1);
            color: var(--primary);
        }

        .profile-tab.active {
            font-weight: 600;
        }

        .profile-section {
            display: none;
            animation: fadeIn 0.3s ease-in-out;
        }

        .profile-section.active {
            display: block;
        }

        .info-card {
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
    </style>
</head>

<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light fixed-top py-3 nav-shadow">
        <div class="container">
            <a class="navbar-brand d-flex align-items-center" href="index.html">
                <div class="bg-gradient-blue rounded-lg d-flex align-items-center justify-content-center me-2"
                    style="width: 40px; height: 40px;">
                    <i class="fas fa-heartbeat text-white fs-5"></i>
                </div>
                <span class="fs-4 fw-bold text-primary">智联医防</span>
            </a>

            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav mx-auto">
                    <li class="nav-item mx-2">
                        <a class="nav-link" href="index.html">首页</a>
                    </li>
                    <li class="nav-item mx-2">
                        <a class="nav-link" href="ai-consultation.html">AI问诊</a>
                    </li>
                    <li class="nav-item mx-2">
                        <a class="nav-link" href="medical-science.html">医学科普</a>
                    </li>
                    <li class="nav-item mx-2">
                        <a class="nav-link" href="mental-health.html">心理健康</a>
                    </li>
                    <li class="nav-item mx-2">
                        <a class="nav-link" href="e-record.html">电子档案</a>
                    </li>
                </ul>

                <div class="d-flex align-items-center position-relative show-dropdown">
                    <a href="profile.html" class="d-flex align-items-center text-decoration-none">
                        <img src="https://picsum.photos/id/64/100/100" alt="用户头像" class="rounded-circle me-2"
                            style="width: 40px; height: 40px; border: 2px solid var(--primary);">
                        <span class="d-none d-md-inline fw-medium me-1">张明阳</span>
                        <i class="fas fa-angle-down text-muted"></i>
                    </a>

                    <div class="profile-dropdown">
                        <a href="profile.html" class="dropdown-item py-2">
                            <i class="far fa-user me-2"></i>个人资料
                        </a>
                        <a href="#" class="dropdown-item py-2">
                            <i class="fas fa-cog me-2"></i>设置
                        </a>
                        <hr class="dropdown-divider">
                        <a href="#" class="dropdown-item py-2 text-danger">
                            <i class="fas fa-sign-out-alt me-2"></i>退出登录
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- 个人中心内容 -->
    <div class="container py-5 profile-container">
        <div class="row">
            <div class="col-lg-4 mb-4">
                <div class="card sidebar-card info-card">
                    <div class="card-body text-center p-4">
                        <div class="position-relative d-inline-block mb-4">
                            <img src="https://picsum.photos/id/64/100/100" alt="用户头像"
                                class="rounded-circle object-cover"
                                style="width: 100px; height: 100px; border: 4px solid rgba(22, 93, 255, 0.1);">
                            <button
                                class="position-absolute bottom-0 end-0 bg-primary text-white rounded-circle d-flex align-items-center justify-content-center"
                                style="width: 32px; height: 32px;">
                                <i class="fas fa-camera"></i>
                            </button>
                        </div>
                        <h3 class="h4 fw-semibold mb-1">张明阳</h3>
                        <p class="text-muted small mb-3">ID: HC-123456</p>
                        <span class="badge bg-success bg-opacity-10 text-success">已认证</span>

                        <div class="mt-4">
                            <a href="#" class="profile-tab active" data-target="profile-info">
                                <i class="far fa-user me-2"></i>个人资料
                            </a>
                            <a href="#" class="profile-tab" data-target="health-profile">
                                <i class="fas fa-heartbeat me-2"></i>健康档案
                            </a>
                            <a href="#" class="profile-tab" data-target="appointment">
                                <i class="far fa-calendar-check me-2"></i>预约记录
                            </a>
                            <a href="#" class="profile-tab" data-target="consultation">
                                <i class="far fa-comments me-2"></i>问诊历史
                            </a>
                            <a href="#" class="profile-tab" data-target="settings">
                                <i class="fas fa-cog me-2"></i>账户设置
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-8">
                <!-- 个人资料 -->
                <div class="card info-card mb-4 profile-section active" id="profile-info">
                    <div class="card-header bg-white py-3">
                        <div class="d-flex justify-content-between align-items-center">
                            <h3 class="h5 fw-semibold mb-0">个人资料</h3>
                            <button class="btn btn-primary">
                                <i class="fas fa-pencil-alt me-2"></i>编辑资料
                            </button>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="row mb-4">
                            <div class="col-md-6">
                                <h4 class="h5 fw-medium mb-3">基本信息</h4>
                                <div class="mb-3">
                                    <p class="text-muted mb-1">姓名</p>
                                    <p class="fw-medium">张明阳</p>
                                </div>
                                <div class="mb-3">
                                    <p class="text-muted mb-1">性别</p>
                                    <p class="fw-medium">男</p>
                                </div>
                                <div class="mb-3">
                                    <p class="text-muted mb-1">出生日期</p>
                                    <p class="fw-medium">1990年05月15日</p>
                                </div>
                                <div class="mb-3">
                                    <p class="text-muted mb-1">手机号码</p>
                                    <p class="fw-medium">138****5678</p>
                                </div>
                                <div class="mb-3">
                                    <p class="text-muted mb-1">电子邮箱</p>
                                    <p class="fw-medium">zhangxm@example.com</p>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <h4 class="h5 fw-medium mb-3">个人偏好</h4>
                                <div class="mb-3">
                                    <p class="text-muted mb-1">默认医院</p>
                                    <p class="fw-medium">河南省人民医院</p>
                                </div>
                                <div class="mb-3">
                                    <p class="text-muted mb-1">常用科室</p>
                                    <p class="fw-medium">内科</p>
                                </div>
                                <div class="mb-3">
                                    <p class="text-muted mb-1">紧急联系人</p>
                                    <p class="fw-medium">李华 (配偶)</p>
                                </div>
                                <div class="mb-3">
                                    <p class="text-muted mb-1">紧急联系电话</p>
                                    <p class="fw-medium">139****8765</p>
                                </div>
                                <div class="mb-3">
                                    <p class="text-muted mb-1">通知方式</p>
                                    <p class="fw-medium">短信 + 邮件</p>
                                </div>
                            </div>
                        </div>

                        <h4 class="h5 fw-medium mb-3">地址信息</h4>
                        <div class="card border mb-3">
                            <div class="card-body">
                                <div class="d-flex justify-content-between align-items-start mb-3">
                                    <div>
                                        <p class="fw-medium mb-1">张明阳</p>
                                        <p class="text-muted mb-1">郑州市金水区纬五路7号</p>
                                        <p class="text-muted">138****5678</p>
                                    </div>
                                    <div>
                                        <button class="btn btn-sm btn-link text-primary">
                                            <i class="fas fa-pencil-alt me-1"></i>编辑
                                        </button>
                                        <button class="btn btn-sm btn-link text-danger">
                                            <i class="far fa-trash-alt me-1"></i>删除
                                        </button>
                                    </div>
                                </div>
                                <span class="badge bg-primary bg-opacity-10 text-primary">默认地址</span>
                            </div>
                        </div>

                        <button class="btn btn-outline-primary">
                            <i class="fas fa-plus me-2"></i>添加新地址
                        </button>
                    </div>
                </div>

                <!-- 健康档案 -->
                <div class="card info-card mb-4 profile-section" id="health-profile">
                    <div class="card-header bg-white py-3">
                        <div class="d-flex justify-content-between align-items-center">
                            <h3 class="h5 fw-semibold mb-0">健康档案</h3>
                            <button class="btn btn-primary">
                                <i class="fas fa-plus me-2"></i>添加健康记录
                            </button>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="row mb-4">
                            <div class="col-md-4">
                                <div class="card bg-blue-50 border border-blue-100 rounded-3 mb-3">
                                    <div class="card-body">
                                        <div class="d-flex justify-content-between">
                                            <div>
                                                <p class="text-primary fw-medium mb-1">血压</p>
                                                <p class="h3 fw-bold mb-0">120/80 mmHg</p>
                                            </div>
                                            <div class="bg-blue-100 rounded-circle d-flex align-items-center justify-content-center"
                                                style="width: 40px; height: 40px;">
                                                <i class="fas fa-heartbeat text-primary"></i>
                                            </div>
                                        </div>
                                        <p class="text-primary small mb-0 mt-2">上次测量: 2024-06-15</p>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="card bg-green-50 border border-green-100 rounded-3 mb-3">
                                    <div class="card-body">
                                        <div class="d-flex justify-content-between">
                                            <div>
                                                <p class="text-success fw-medium mb-1">血糖</p>
                                                <p class="h3 fw-bold mb-0">5.6 mmol/L</p>
                                            </div>
                                            <div class="bg-green-100 rounded-circle d-flex align-items-center justify-content-center"
                                                style="width: 40px; height: 40px;">
                                                <i class="fas fa-tint text-success"></i>
                                            </div>
                                        </div>
                                        <p class="text-success small mb-0 mt-2">上次测量: 2024-06-10</p>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="card bg-purple-50 border border-purple-100 rounded-3 mb-3">
                                    <div class="card-body">
                                        <div class="d-flex justify-content-between">
                                            <div>
                                                <p class="text-purple fw-medium mb-1">体重</p>
                                                <p class="h3 fw-bold mb-0">75 kg</p>
                                            </div>
                                            <div class="bg-purple-100 rounded-circle d-flex align-items-center justify-content-center"
                                                style="width: 40px; height: 40px;">
                                                <i class="fas fa-weight text-purple"></i>
                                            </div>
                                        </div>
                                        <p class="text-purple small mb-0 mt-2">上次测量: 2024-06-20</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <h4 class="h5 fw-medium mb-3">健康记录</h4>
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead class="table-light">
                                    <tr>
                                        <th>记录类型</th>
                                        <th>日期</th>
                                        <th>医疗机构</th>
                                        <th>医生</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <div class="bg-blue-100 rounded-circle d-flex align-items-center justify-content-center me-3"
                                                    style="width: 32px; height: 32px;">
                                                    <i class="fas fa-stethoscope text-blue"></i>
                                                </div>
                                                <span>常规体检</span>
                                            </div>
                                        </td>
                                        <td>2025-06-15</td>
                                        <td>河南省人民医院</td>
                                        <td>王医生</td>
                                        <td>
                                            <a href="#" class="text-primary">查看</a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <div class="bg-red-100 rounded-circle d-flex align-items-center justify-content-center me-3"
                                                    style="width: 32px; height: 32px;">
                                                    <i class="fas fa-tooth text-red"></i>
                                                </div>
                                                <span>牙科检查</span>
                                            </div>
                                        </td>
                                        <td>2025-05-20</td>
                                        <td>郑州大学第一附属医院</td>
                                        <td>李医生</td>
                                        <td>
                                            <a href="#" class="text-primary">查看</a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <div class="bg-green-100 rounded-circle d-flex align-items-center justify-content-center me-3"
                                                    style="width: 32px; height: 32px;">
                                                    <i class="fas fa-heartbeat text-green"></i>
                                                </div>
                                                <span>心脏检查</span>
                                            </div>
                                        </td>
                                        <td>2024-04-10</td>
                                        <td>河南省人民医院</td>
                                        <td>张医生</td>
                                        <td>
                                            <a href="#" class="text-primary">查看</a>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                        <div class="text-center mt-4">
                            <button class="btn btn-outline-primary">
                                <i class="fas fa-history me-2"></i>查看更多健康记录
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 预约记录 -->
                <div class="card info-card mb-4 profile-section" id="appointment">
                    <div class="card-header bg-white py-3">
                        <div class="d-flex justify-content-between align-items-center">
                            <h3 class="h5 fw-semibold mb-0">预约记录</h3>
                            <button class="btn btn-primary">
                                <i class="fas fa-calendar-plus me-2"></i>预约新门诊
                            </button>
                        </div>
                    </div>
                    <div class="card-body">
                        <h4 class="h5 fw-medium mb-3">即将到来的预约</h4>
                        <div class="row g-3 mb-4">
                            <div class="col-md-6">
                                <div class="card border border-blue-200 rounded-3 bg-blue-50 p-4">
                                    <div class="d-flex justify-content-between align-items-start">
                                        <div>
                                            <h5 class="fw-medium text-primary mb-1">
                                                <i class="fas fa-user-md me-2"></i> 皮肤科门诊
                                            </h5>
                                            <p class="text-muted small mb-1">
                                                <i class="fas fa-hospital me-1"></i> 河南省人民医院 - 皮肤科
                                            </p>
                                            <p class="text-muted small">
                                                <i class="fas fa-clock me-1"></i> 2025-07-05 09:30 - 10:00
                                            </p>
                                        </div>
                                        <div class="text-end">
                                            <span class="badge bg-blue-100 text-blue-800">3天后</span>
                                            <div class="mt-2">
                                                <button class="btn btn-sm btn-primary me-1">
                                                    <i class="fas fa-clipboard-list"></i> 查看详情
                                                </button>
                                                <button class="btn btn-sm btn-outline-primary">
                                                    <i class="fas fa-phone"></i> 联系医院
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="card border border-green-200 rounded-3 bg-green-50 p-4">
                                    <div class="d-flex justify-content-between align-items-start">
                                        <div>
                                            <h5 class="fw-medium text-secondary mb-1">
                                                <i class="fas fa-user-md me-2"></i> 年度体检预约
                                            </h5>
                                            <p class="text-muted small mb-1">
                                                <i class="fas fa-hospital me-1"></i> 郑州大学第一附属医院 - 体检中心
                                            </p>
                                            <p class="text-muted small">
                                                <i class="fas fa-clock me-1"></i> 2025-08-10 08:00 - 11:30
                                            </p>
                                        </div>
                                        <div class="text-end">
                                            <span class="badge bg-green-100 text-green-800">36天后</span>
                                            <div class="mt-2">
                                                <button class="btn btn-sm btn-secondary me-1">
                                                    <i class="fas fa-clipboard-list"></i> 查看详情
                                                </button>
                                                <button class="btn btn-sm btn-outline-secondary">
                                                    <i class="fas fa-calendar-alt"></i> 更改时间
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <h4 class="h5 fw-medium mb-3">历史预约</h4>
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead class="table-light">
                                    <tr>
                                        <th>预约类型</th>
                                        <th>日期时间</th>
                                        <th>医疗机构</th>
                                        <th>医生</th>
                                        <th>状态</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>牙科检查</td>
                                        <td>2025-05-20 14:30</td>
                                        <td>郑州大学第一附属医院</td>
                                        <td>李医生</td>
                                        <td>
                                            <span class="badge bg-success">已完成</span>
                                        </td>
                                        <td>
                                            <a href="#" class="text-primary">查看</a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>心脏检查</td>
                                        <td>2025-04-10 10:00</td>
                                        <td>河南省人民医院</td>
                                        <td>张医生</td>
                                        <td>
                                            <span class="badge bg-success">已完成</span>
                                        </td>
                                        <td>
                                            <a href="#" class="text-primary">查看</a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>常规体检</td>
                                        <td>2025-03-15 08:30</td>
                                        <td>河南省人民医院</td>
                                        <td>王医生</td>
                                        <td>
                                            <span class="badge bg-success">已完成</span>
                                        </td>
                                        <td>
                                            <a href="#" class="text-primary">查看</a>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                        <div class="text-center mt-4">
                            <button class="btn btn-outline-primary">
                                <i class="fas fa-history me-2"></i>查看更多预约记录
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 问诊历史 -->
                <div class="card info-card mb-4 profile-section" id="consultation">
                    <div class="card-header bg-white py-3">
                        <div class="d-flex justify-content-between align-items-center">
                            <h3 class="h5 fw-semibold mb-0">问诊历史</h3>
                            <button class="btn btn-primary">
                                <i class="fas fa-headset me-2"></i>在线问诊
                            </button>
                        </div>
                    </div>
                    <div class="card-body">
                        <h4 class="h5 fw-medium mb-3">AI问诊记录</h4>
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead class="table-light">
                                    <tr>
                                        <th>问诊类型</th>
                                        <th>日期时间</th>
                                        <th>主诉症状</th>
                                        <th>医生</th>
                                        <th>状态</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <div class="bg-primary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-3"
                                                    style="width: 32px; height: 32px;">
                                                    <i class="fas fa-robot text-primary"></i>
                                                </div>
                                                <span>AI问诊</span>
                                            </div>
                                        </td>
                                        <td>2025-06-28 19:00</td>
                                        <td>咳嗽、喉咙痛</td>
                                        <td>AI医生</td>
                                        <td>
                                            <span class="badge bg-info">已完成</span>
                                        </td>
                                        <td>
                                            <a href="#" class="text-primary">查看</a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <div class="bg-primary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-3"
                                                    style="width: 32px; height: 32px;">
                                                    <i class="fas fa-robot text-primary"></i>
                                                </div>
                                                <span>AI问诊</span>
                                            </div>
                                        </td>
                                        <td>2025-05-15 14:30</td>
                                        <td>失眠、焦虑</td>
                                        <td>AI医生</td>
                                        <td>
                                            <span class="badge bg-info">已完成</span>
                                        </td>
                                        <td>
                                            <a href="#" class="text-primary">查看</a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <div class="bg-primary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-3"
                                                    style="width: 32px; height: 32px;">
                                                    <i class="fas fa-robot text-primary"></i>
                                                </div>
                                                <span>AI问诊</span>
                                            </div>
                                        </td>
                                        <td>2025-04-10 10:00</td>
                                        <td>消化不良</td>
                                        <td>AI医生</td>
                                        <td>
                                            <span class="badge bg-info">已完成</span>
                                        </td>
                                        <td>
                                            <a href="#" class="text-primary">查看</a>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                        <h4 class="h5 fw-medium mb-3 mt-5">医生问诊记录</h4>
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead class="table-light">
                                    <tr>
                                        <th>问诊类型</th>
                                        <th>日期时间</th>
                                        <th>医疗机构</th>
                                        <th>医生</th>
                                        <th>状态</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>线下问诊</td>
                                        <td>2025-03-20 10:30</td>
                                        <td>河南省人民医院</td>
                                        <td>王医生</td>
                                        <td>
                                            <span class="badge bg-success">已完成</span>
                                        </td>
                                        <td>
                                            <a href="#" class="text-primary">查看</a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>线上问诊</td>
                                        <td>2025-02-15 15:00</td>
                                        <td>互联网医院</td>
                                        <td>李医生</td>
                                        <td>
                                            <span class="badge bg-success">已完成</span>
                                        </td>
                                        <td>
                                            <a href="#" class="text-primary">查看</a>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                        <div class="text-center mt-4">
                            <button class="btn btn-outline-primary">
                                <i class="fas fa-history me-2"></i>查看更多问诊记录
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 账户设置 -->
                <div class="card info-card mb-4 profile-section" id="settings">
                    <div class="card-header bg-white py-3">
                        <div class="d-flex justify-content-between align-items-center">
                            <h3 class="h5 fw-semibold mb-0">账户设置</h3>
                            <button class="btn btn-primary">
                                <i class="fas fa-save me-2"></i>保存设置
                            </button>
                        </div>
                    </div>
                    <div class="card-body">
                        <h4 class="h5 fw-medium mb-4">基本设置</h4>
                        <div class="row g-4">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label text-muted">姓名</label>
                                    <input type="text" class="form-control" value="张明阳" disabled>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label text-muted">手机号码</label>
                                    <div class="input-group">
                                        <input type="text" class="form-control" value="138****5678" disabled>
                                        <button class="btn btn-primary btn-sm" type="button">
                                            <i class="fas fa-mobile-alt me-1"></i>更换
                                        </button>
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label text-muted">电子邮箱</label>
                                    <div class="input-group">
                                        <input type="email" class="form-control" value="zhangxm@example.com" disabled>
                                        <button class="btn btn-primary btn-sm" type="button">
                                            <i class="fas fa-envelope me-1"></i>更换
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label text-muted">性别</label>
                                    <select class="form-control" disabled>
                                        <option>男</option>
                                        <option>女</option>
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label text-muted">出生日期</label>
                                    <input type="date" class="form-control" value="1990-05-15" disabled>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label text-muted">默认医院</label>
                                    <select class="form-control" disabled>
                                        <option>河南省人民医院</option>
                                        <option>郑州大学第一附属医院</option>
                                        <option>郑州市中心医院</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <h4 class="h5 fw-medium mb-4 mt-5">安全设置</h4>
                        <div class="row g-4">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label text-muted">登录密码</label>
                                    <button class="btn btn-outline-primary w-100" type="button">
                                        <i class="fas fa-lock me-1"></i>修改密码
                                    </button>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label text-muted">支付密码</label>
                                    <button class="btn btn-outline-primary w-100" type="button">
                                        <i class="fas fa-lock me-1"></i>设置支付密码
                                    </button>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label text-muted">账号安全</label>
                                    <div class="d-flex justify-content-between align-items-center">
                                        <span>手机绑定</span>
                                        <span class="text-success">
                                            <i class="fas fa-check-circle me-1"></i>已绑定
                                        </span>
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label text-muted">账号安全</label>
                                    <div class="d-flex justify-content-between align-items-center">
                                        <span>邮箱绑定</span>
                                        <span class="text-success">
                                            <i class="fas fa-check-circle me-1"></i>已绑定
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <h4 class="h5 fw-medium mb-4 mt-5">通知设置</h4>
                        <div class="row g-4">
                            <div class="col-md-6">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="sms-notification" checked>
                                    <label class="form-check-label" for="sms-notification">
                                        <i class="fas fa-mobile-alt me-2"></i>短信通知
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="email-notification" checked>
                                    <label class="form-check-label" for="email-notification">
                                        <i class="fas fa-envelope me-2"></i>邮件通知
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="app-notification" checked>
                                    <label class="form-check-label" for="app-notification">
                                        <i class="fas fa-bell me-2"></i>App推送通知
                                    </label>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="appointment-reminder" checked>
                                    <label class="form-check-label" for="appointment-reminder">
                                        <i class="fas fa-calendar-alt me-2"></i>预约提醒
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="health-reminder" checked>
                                    <label class="form-check-label" for="health-reminder">
                                        <i class="fas fa-heartbeat me-2"></i>健康指标提醒
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="news-notification">
                                    <label class="form-check-label" for="news-notification">
                                        <i class="fas fa-newspaper me-2"></i>健康资讯推送
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <div class="row g-5 mb-5">
                <div class="col-lg-4">
                    <div class="d-flex align-items-center mb-4">
                        <div class="bg-gradient-blue rounded-lg d-flex align-items-center justify-content-center me-2"
                            style="width: 40px; height: 40px;">
                            <i class="fas fa-heartbeat text-white"></i>
                        </div>
                        <span class="fs-4 fw-bold text-white">智联医防</span>
                    </div>
                    <p class="text-white-50 mb-4">
                        我们致力于提供便捷、专业的医疗健康服务，让每个人都能享受到高质量的医疗资源。
                    </p>
                    <div class="d-flex">
                        <a href="#" class="btn btn-light btn-sm rounded-circle me-2" style="width: 40px; height: 40px;">
                            <i class="fab fa-weixin"></i>
                        </a>
                        <a href="#" class="btn btn-light btn-sm rounded-circle me-2" style="width: 40px; height: 40px;">
                            <i class="fab fa-weibo"></i>
                        </a>
                        <a href="#" class="btn btn-light btn-sm rounded-circle me-2" style="width: 40px; height: 40px;">
                            <i class="fab fa-qq"></i>
                        </a>
                        <a href="#" class="btn btn-light btn-sm rounded-circle" style="width: 40px; height: 40px;">
                            <i class="fab fa-youtube"></i>
                        </a>
                    </div>
                </div>

                <div class="col-lg-2">
                    <h5 class="text-white mb-4">快速链接</h5>
                    <ul class="list-unstyled footer-links">
                        <li class="mb-2"><a href="index.html">首页</a></li>
                        <li class="mb-2"><a href="ai-consultation.html">AI问诊</a></li>
                        <li class="mb-2"><a href="medical-science.html">医学科普</a></li>
                        <li class="mb-2"><a href="mental-health.html">心理健康</a></li>
                        <li class="mb-2"><a href="e-record.html">电子档案</a></li>
                    </ul>
                </div>

                <div class="col-lg-3">
                    <h5 class="text-white mb-4"><a href="https://zwfw.nhc.gov.cn/cxx/"
                            class="text-white"></a>基层医疗信息查询</a></h5>
                    <ul class="list-unstyled footer-links">
                        <li class="d-flex mb-3">
                            <i class="fas fa-map-marker-alt text-primary mt-1 me-3"></i>
                            <span><a href="https://www.nhc.gov.cn/wjw/wsbzxx/wsbz.shtml"
                                    class="text-white">卫生标准查询</a></span>
                        </li>
                        <li class="d-flex mb-3">
                            <i class="fas fa-map-marker-alt text-primary me-3"></i>
                            <span><a href="https://sppt.cfsa.net.cn:8086/db" class="text-white">食品安全国家标准查询</a></span>
                        </li>
                        <li class="d-flex mb-3">
                            <i class="fas fa-map-marker-alt text-primary me-3"></i>
                            <span><a href="https://www.nhc.gov.cn/wjw/jbywml/list.shtml"
                                    class="text-white">基本药物目录查询</a></span>
                        </li>
                        <!-- <li class="d-flex mb-3">
                            <i class="fas fa-map-marker-alt text-primary me-3"></i>
                            <span><a href="https://zwfw.nhc.gov.cn/cxx/ywcx/ygptcx/"
                                    class="text-white">药物平台管理查询</a></span>
                        </li> -->
                        <li class="d-flex mb-3">
                            <i class="fas fa-map-marker-alt text-primary me-3"></i>
                            <span><a href="https://zwfw.nhc.gov.cn/cxx/qtcx/gjwsczcx/"
                                    class="text-white">国家卫生城镇查询</a></span>
                        </li>
                        <li class="d-flex">
                            <i class="fas fa-map-marker-alt text-primary me-3"></i>
                            <span><a href="https://zwfw.nhc.gov.cn/cxx/ywjgcx/qgyzjg/"
                                    class="text-white">医卫机构查询</a></span>
                        </li>

                    </ul>
                </div>

                <div class="col-lg-3">
                    <h5 class="text-white mb-4">医疗信息查询</h5>
                    <p class="text-white-50 mb-4">
                        查询权威医疗数据，获取最新公共卫生服务信息
                    </p>
                    <form>
                        <div class="mb-3">
                            <input type="email" class="form-control bg-dark border-dark text-white"
                                placeholder="您的邮箱地址">
                        </div>
                        <button type="submit" class="btn btn-primary w-100 py-3 rounded-pill shadow-lg">
                            <i class="fas fa-search me-2"></i>立即查询
                        </button>
                    </form>
                </div>
            </div>

            <div class="border-top border-gray-800 pt-4">
                <div class="d-flex flex-column flex-md-row justify-content-between align-items-center">
                    <p class="text-white-50 mb-3 mb-md-0">
                        &copy; 2025 智联医防服务平台. 保留所有权利.
                    </p>
                    <div class="d-flex">
                        <a href="#" class="text-white-50 me-3">隐私政策</a>
                        <a href="#" class="text-white-50 me-3">服务条款</a>
                        <a href="#" class="text-white-50 me-3">免责声明</a>
                        <a href="#" class="text-white-50">帮助中心</a>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 导航栏滚动效果
        window.addEventListener('scroll', function () {
            const navbar = document.querySelector('.navbar');
            if (window.scrollY > 100) {
                navbar.classList.add('shadow');
            } else {
                navbar.classList.remove('shadow');
            }
        });

        // 标签切换功能
        document.querySelectorAll('.profile-tab').forEach(tab => {
            tab.addEventListener('click', function (e) {
                e.preventDefault();

                // 移除所有活动状态
                document.querySelectorAll('.profile-tab').forEach(t => {
                    t.classList.remove('active');
                });

                // 隐藏所有内容区域
                document.querySelectorAll('.profile-section').forEach(section => {
                    section.classList.remove('active');
                });

                // 添加当前活动状态
                this.classList.add('active');

                // 显示对应内容区域
                const targetId = this.getAttribute('data-target');
                document.getElementById(targetId).classList.add('active');

                // 滚动到内容顶部
                document.getElementById(targetId).scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            });
        });
    </script>
</body>

</html>